<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程测试</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css" media="all" />
    <script src="/common/layui/layui.js"></script>
</head>
<body>
<div style="margin-top: 10px">
    <form class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">模型名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="processDefinitionKey" lay-verify="required">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">业务编码</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="businessKey" lay-verify="required">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">参数</label>
            <div class="layui-input-inline">
                <textarea class="layui-textarea" name="map"></textarea>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="start">发起</button>
            <button class="layui-btn" lay-submit="" lay-filter="complate">办理</button>
        </div>
    </form>
</div>

<div>
    <iframe id="flowFrame" name="flowFrame" style="width: 100%; height: 600px; border-radius: 1px;" ></iframe>
</div>

<script type="application/javascript">
    layui.use(['layer', 'form'], function(){
        const $ = layui.$;
        const form = layui.form;

        form.on('submit(start)',function (data) {
            const param = data.field;
            param.map = JSON.parse(param.map)
            $.ajax({
                url:'/activiti/business/start',
                type:'post',
                data: JSON.stringify(param),
                dataType:'json',
                contentType : "application/json",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg('流程发起成功', {icon:6})
                        var url = "/activiti/business/pic?processDefinitionKey="+param.processDefinitionKey+"&businessKey="+param.businessKey
                        $('#flowFrame').attr("src", url)
                    } else {
                        layer.msg(res.msg, {icon:5})
                    }
                },
                error: function(){
                    layer.msg('流程发起失败', {icon:5})
                }
            })
            return false;
        })

        form.on('submit(complate)',function (data) {
            const param = data.field;
            param.map = JSON.parse(param.map)
            $.ajax({
                url:'/activiti/business/complate',
                type:'post',
                data: JSON.stringify(param),
                dataType:'json',
                contentType : "application/json",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg('流程办理成功', {icon:6})
                        $('#flowFrame').reload()
                    } else {
                        layer.msg(res.msg, {icon:5})
                    }
                },
                error: function(){
                    layer.msg('流程办理失败', {icon:5})
                }
            })
            return false;
        })

    })
</script>
</body>
</html>